import {createApp} from 'vue';
// 初始化css
import 'normalize.css/normalize.css';
import {ElMessageBox, ElMessage, ElNotification} from 'element-plus';

// 用户验证
import './permission';
import App from './App.vue';
import router from './router';
import store, {key} from './store';
// element-plus
import installElementPlus from './plugins/element';
// 挂载到vue实例上
// 全局 css
import '@/styles/index.scss';
// svg icons
import initSvgIcon from '@/icons/index';
// 权限指令
import permissionDirective from './directive/permission/index';

const app = createApp(App)

// 获取store里存储的size
const size = store.state.app.size

app
  .use(store, key)
  .use(router)
  .use(installElementPlus, {
    size
  })
  .use(permissionDirective)
  .use(initSvgIcon)
  .mount('#app')

// vue实例上挂载属性类型声明
/** 见 @vue/runtime-core
 * Custom properties added to component instances in any way and can be accessed through `this`
 *
 * @example
 * Here is an example of adding a property `$router` to every component instance:
 * ```ts
 * import { createApp } from 'vue'
 * import { Router, createRouter } from 'vue-router'
 *
 * declare module '@vue/runtime-core' {
 *   interface ComponentCustomProperties {
 *     $router: Router
 *   }
 * }
 *
 * // effectively adding the router to every component instance
 * const app = createApp({})
 * const router = createRouter()
 * app.config.globalProperties.$router = router
 *
 * const vm = app.mount('#app')
 * // we can access the router from the instance
 * vm.$router.push('/')
 * ```
 */
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $message: typeof ElMessage;
    $notify: typeof ElNotification;
    $confirm: typeof ElMessageBox.confirm;
    $alert: typeof ElMessageBox.alert;
    $prompt: typeof ElMessageBox.prompt;
  }
}
